<template>
<div id="login-warp">
  <div id="login">
    <transition :name="settings.visible ? 'slideleft' : 'slideright'">
      <IConfig v-if="settings.visible" />
      <!-- IConfig -->
      <div class="login">
        <div class="logo-info">
          <!-- <img class="logo" src="@/assets/logo.png" alt="logo"> -->
          <p class="name">
            {{logintitle}}
            <br> <span class="sub">{{loginsubtitle}}</span>
          </p>
        </div>
        <!-- .logo-info -->
        <IForm ref="login" :model="login" :elem="loginElem" :rules="loginRule" :btn-loading="$store.state.app.loading" btn-long submit-text="确  认  登  录" @on-submit="handleLogin" />
        <!-- IForm -->
        <p class="version">重庆迈酷网络科技有限责任公司  V:{{ version }}</p>
        <!-- .version -->
      </div>
    </transition>
<!--<a v-if="settings.button" class="settings" href="#" @click.prevent="settings.visible = !settings.visible">
      <Icon :type="settings.visible ? 'md-laptop' : 'md-construct'" size="16" style="margin-top: -2px;" />
      <strong>{{ settings.visible ? 'Login' : 'Settings'}}</strong>
    </a>-->
  </div>
  <!-- #login -->
  <IError />
  <!-- IError -->
</div>
</template>
<script>
import config from "@/config";
import ax from "@/utils/axios";
import { _login } from "@/services/app";
import IConfig from "@/layouts/partials/Config";
import IError from "@/layouts/partials/Error";
export default {
  name: "Login",
  components: {
    IConfig,
    IError
  },
  data: () => ({
    // 设置属性对象
    settings: {
      button: false,
      visible: false
    },
    // 版本属性
    version: "",
    logintitle:"",
    loginsubtitle:"",
    // 表单数据对象(登录)
    login: {
      domain: "",
      user_name: "",
      password: "",
      grant_type:"client_credentials",
      client_id:"100",
      client_secret:"101",
    },
    // 表单元素数组(登录)
    loginElem: [
      {
        prop: "domain",
        placeholder: "公司代码",
        prefix: "md-contacts"
      },
      {
        prop: "user_name",
        placeholder: "用户名",
        prefix: "md-contact"
      },
      {
        prop: "password",
        placeholder: "密码",
        prefix: "md-lock",
        type: "password"
      }
    ],
    // 表单验证规则(登录)
    loginRule: {
      domain:[
        {
          required: true,
          message: "请输入公司代码",
          trigger: "blur"
        }
      ],
      user_name: [
        {
          required: true,
          message: "请输入用户名",
          trigger: "blur"
        }
      ],
      password: [
        {
          required: true,
          message: "请输入密码",
          trigger: "blur"
        }
      ]
    }
  }),
  mounted() {
    const { env, version, logintitle, loginsubtitle } = config;
    switch (env) {
      case "release":
        this.version = `${version} Release`;
        this.logintitle = `${logintitle}`;
        this.loginsubtitle = `${loginsubtitle}`;
        break;
      case "production":
        // this.version = `${version} Production`
        this.version = version;
        this.logintitle = logintitle;
        this.loginsubtitle = loginsubtitle;
        break;
      default:
        this.settings.button = true;
        this.login = {
          domain:"10001",
          user_name: "admin",
          password: "test",
          grant_type:"client_credentials",
          client_id:"100",
          client_secret:"101"
        };
        this.version =
          env === "development" ? `${version} Develop` : `${version} Test`;
        this.logintitle = logintitle;
        this.loginsubtitle = loginsubtitle;
    }
    // 更新页面 title 元素内容
    this.$store.commit("TITLE", "Login");
  },
  methods: {
    // 用户登录
    handleLogin() {
      //debugger
      // 配置默认接口地址
      const baseURL = localStorage.getItem("newBaseAPI") || config.baseURL;
      if (config.env !== "production") {
        console.log("API_URL", baseURL);
      }
      ax.defaults.baseURL = baseURL;
      this.$Loading.start();
      this.$store.commit("LOADING", true);
      // 模拟异步请求
      setTimeout(() => {
        _login(this.login)
          .then(res => {

            this.$Loading.finish();
            this.$store.commit("LOADING", false);
            //const {code,msg} = res.error;
            const {status} = res.error.code;

            if (!status) {
              // 获取用户信息
              const userInfo = res.data;
              const authtoken = res.data.jwt.access_token;
              const domain = userInfo.domain;
              const user_name = userInfo.user_name;
              const roles = userInfo.roles;
 
              this.$store.commit("USER_INFO", userInfo);
              this.$store.commit("AUTH_TOKEN", authtoken);
              // 获取菜单列表
              this.$store.dispatch("handleMenu",{domain,user_name,roles});

            } else {
              this.$Message.error("The user information is empty");
            }

          })
          .catch((err) => {
            this.$Loading.error(err);
            this.$store.commit("LOADING", false);
          });
      }, 800);
    }
  }
};
</script>
<style lang="postcss" scoped>
#login {
  box-shadow: 0 0 100px rgba(0, 0, 0, 0.08);
  height: 370px;
  left: 50%;
  margin: -175px 0 0 -180px;
  padding: 36px;
  position: fixed;
  top: 50%;
  width: 360px;
  /* 过渡动画 */
  & .slideleft-enter-active,
  & .slideright-enter-active {
    transform: translateX(0);
    transition: all 0.5s;
  }
  & .slideleft-enter,
  & .slideright-enter {
    opacity: 0;
  }
  & .slideleft-leave-active,
  & .slideright-leave-active {
    opacity: 0;
    transition: all 0.5s;
  }
  & .slideleft-leave,
  & .slideright-leave {
    transform: translateX(0);
  }
  & .slideleft-enter,
  & .slideright-leave-active {
    transform: translateX(300px);
  }
  & .slideleft-leave-active,
  & .slideright-enter {
    transform: translateX(-300px);
  }
  /* end */
  & .settings {
    bottom: 16px;
    position: absolute;
  }
  & .login {
    position: absolute;
    width: 288px;
  }
  & .logo-info {
    height: 64px;
    /* margin-bottom: 22px; */
    text-align: center;
    & .logo {
      height: 64px;
      margin-right: 10px;
      width: 64px;
      border-radius: 50%;
    }
    & .name {
      bottom: 14px;
      display: inline-block;
      font-size: 18px;
      line-height: 20px;
      position: relative;
      text-align: center;
      margin-top: 10px;
    }
    & .sub {
      font-size: 12px;
    }
  }
  & .version {
    color: #888;
    text-align: center;
  }
}
</style>
